<template>
  <div :class="`flex flex-col pb-4 ${animationClass}`">
    <div
      :style="{
        background: `linear-gradient(135deg, ${agentBgColor} 0%, #ffffff 150%)`,
        boxShadow: `0 4px 12px rgba(${hexToRgb(agentColor)}, 0.12), 0 2px 4px rgba(${hexToRgb(
          agentColor
        )}, 0.05)`,
        borderRadius: '8px',
        borderLeft: `3px solid ${agentColor}`,
        transition: 'all 0.3s ease',
      }"
      class="border border-[#f0f0f0] rounded-lg p-3 overflow-hidden relative shadow-[0_4px_12px_rgba(0,0,0,0.06)]"
    >
      <div class="flex items-center mb-2">
        <div
          class="min-w-8 h-8 rounded-md flex items-center justify-center mr-2.5 shadow-sm relative overflow-hidden"
          :style="{
            backgroundColor: agentBgColor,
            color: agentColor,
            boxShadow: `0 2px 5px rgba(${hexToRgb(agentColor)}, 0.2)`,
          }"
        >
          <div v-html="agentIcon"></div>
          <div
            class="absolute top-0 right-0 bottom-0 left-0 opacity-10"
            :style="{
              background: `linear-gradient(135deg, ${agentColor} 0%, transparent 80%)`,
            }"
          ></div>
        </div>
        <div class="flex flex-col">
          <div
            class="text-sm font-bold flex items-center"
            :style="{
              color: agentColor,
            }"
          >
            <div
              class="flex items-center justify-center rounded-full mr-1.5 w-5 h-5"
              :style="{
                backgroundColor: agentColor,
                color: '#fff',
                fontSize: '0.7rem',
                fontWeight: 'bold',
              }"
            >
              {{ agentNumber }}
            </div>
            {{ group.agentName }}
          </div>
        </div>
      </div>

      <div
        class="ml-8 border-l pl-4"
        :style="{ borderColor: `rgba(${hexToRgb(agentColor)}, 0.3)` }"
      >
        <!-- 混合显示所有步骤，按时间排序 -->
        <template v-for="(step, index) of sortedSteps" :key="index">
          <!-- 普通步骤 -->
          <template v-if="step.data.type !== 'acp'">
            <div class="py-1.5">
              <div
                class="text-sm"
                :class="index === sortedSteps.length - 1 ? 'text-gray-600' : 'text-gray-400'"
              >
                {{ getText(step.data) }}
              </div>
            </div>
          </template>
          <template v-else>
            <div class="py-1.5">
              <div
                :class="`rounded-md py-2 px-3 border relative ${
                  (index === sortedSteps.length - 1) === lastAcpIndex ? 'acpPulseAnimation' : ''
                }`"
                :style="{
                  borderColor: `rgba(${hexToRgb(agentColor)}, 0.4)`,
                  background: `linear-gradient(135deg, ${agentBgColor} 0%, #ffffff 150%)`,
                  boxShadow: `0 3px 10px rgba(${hexToRgb(
                    agentColor
                  )}, 0.1), 0 1px 3px rgba(${hexToRgb(agentColor)}, 0.08)`,
                  borderLeft: `2px solid ${agentColor}`,
                  opacity: index === lastAcpIndex ? 1 : 0.75,
                }"
              >
                <div class="flex items-center relative z-10">
                  <div
                    class="flex-shrink-0 flex items-center justify-center"
                    :class="`${
                      index === lastAcpIndex && timelinePending ? 'acpIconAnimation' : ''
                    }`"
                    :style="{
                      color: index === lastAcpIndex ? agentColor : '#9CA3AF',
                      position: 'relative',
                      zIndex: 2,
                    }"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-1.5"
                    >
                      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                    </svg>
                  </div>
                  <!-- 移除数据点动画效果 -->
                  <span
                    class="text-xs font-medium"
                    :style="{
                      color: index === lastAcpIndex ? agentColor : '#9CA3AF',
                      position: 'relative',
                      zIndex: 2,
                    }"
                    >ACP连接</span
                  >

                  <!-- 添加文字放大缩小动画 -->
                  <span
                    class="text-xs ml-2"
                    :class="`${
                      index === lastAcpIndex && timelinePending ? 'acpTextAnimation' : ''
                    }`"
                    :style="{
                      color: index === lastAcpIndex ? agentColor : '#9CA3AF',
                      position: 'relative',
                      zIndex: 2,
                    }"
                  >
                    {{ step.data.text }}
                  </span>
                </div>
              </div>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, inject } from "vue";

const props = defineProps({
  animationClass: String,
  agentBgColor: String,
  agentColor: String,
  agentIcon: String,
});
const group = defineModel("group");

const hexToRgb = inject("hexToRgb");
const agentNumberMap = inject("agentNumberMap");
const timelinePending = inject("timelinePending");

// 对步骤按时间戳排序
const sortedSteps = computed(() => {
  return [...group.value.steps].sort(
    (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
  );
});
// 找出最后一个ACP步骤的索引
const lastAcpIndex = computed(() => {
  let lastAcpIndex = -1;
  for (let i = sortedSteps.value.length - 1; i >= 0; i--) {
    const stepData = sortedSteps.value[i].data;
    if (stepData.type === "acp") {
      lastAcpIndex = i;
      break;
    }
  }
  return lastAcpIndex;
});

const agentNumber = computed(() => {
  return agentNumberMap.value.get(group.value.agentName);
});

const getText = (stepData) => {
  // 尝试提取文件查找结果信息
  let stepContent = "";
  if (stepData.text) {
    try {
      const textObj = JSON.parse(stepData.text);
      if (textObj.text) {
        stepContent = textObj.text;
      } else {
        stepContent = stepData.text;
      }
    } catch (e) {
      stepContent = stepData.text;
    }
  }
  return stepContent;
};
</script>
